<template>
	<section>
		<el-row :gutter="20">
			<el-col :span="10" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true">
					<el-form-item>
						<el-button type="primary" @click="handleParentAdd">添加父节点</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleChildrenAdd">添加子节点</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="batchRemove">批量删除</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<el-col :span="14" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true">
					<el-form-item>
						<el-button plain disabled>编辑菜单</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row :gutter="20" style="height: 200px">
			<el-col :span="10" style="height: 200px">
				<el-tree ref="tree" :data="permissions" @node-click="showEditForm" show-checkbox default-expand-all highlight-current node-key="id" :props="defaultProps">
				</el-tree>
			</el-col>
			<el-col :span="14" style="height: 200px">
				<el-form :model="editForm" :rules="editFormRules" label-width="80px" ref="editForm">
					<el-form-item label="菜单名称" prop="name">
						<el-input v-model="editForm.name"></el-input>
					</el-form-item>
					<el-form-item label="页面路径" prop="path">
						<el-input v-model="editForm.path"></el-input>
					</el-form-item>
					<el-form-item label="菜单标题" prop="title">
						<el-input v-model="editForm.title"></el-input>
					</el-form-item>
					<el-form-item label="图标" prop="icon">
						<el-input v-model="editForm.icon"></el-input>
					</el-form-item>
					<el-form-item label="前段组件" prop="component">
						<el-input v-model="editForm.component"></el-input>
					</el-form-item>
					<el-form-item label="跳转路径" prop="url">
						<el-input v-model="editForm.url"></el-input>
					</el-form-item>
					<el-row :gutter="20">
						<el-col :span="4">
							<el-form-item label="是否启用" prop="delFlag">
								<el-switch v-model="editForm.delFlag"></el-switch>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="排序值" prop="sortOrder">
								<el-input v-model="editForm.sortOrder"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="描述" prop="description">
						<el-input v-model="editForm.description"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click.native="editSubmit">保存</el-button>
						<el-button>取消</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-dialog title="新增父节点" :visible.sync="addParentFormVisible" :close-on-click-modal="false">
			<el-form :model="addParentForm" label-width="100px" :rules="addParentFormRules" ref="addParentForm">
				<el-form-item label="菜单名称" prop="name">
					<el-input v-model="addParentForm.name"></el-input>
				</el-form-item>
				<el-form-item label="页面路径" prop="path">
					<el-input v-model="addParentForm.path"></el-input>
				</el-form-item>
				<el-form-item label="菜单标题" prop="title">
					<el-input v-model="addParentForm.title"></el-input>
				</el-form-item>
				<el-form-item label="图标" prop="icon">
					<el-input v-model="addParentForm.icon"></el-input>
				</el-form-item>
				<el-form-item label="前段组件" prop="component">
					<el-input v-model="addParentForm.component"></el-input>
				</el-form-item>
				<el-form-item label="跳转路径" prop="url">
					<el-input v-model="addParentForm.url"></el-input>
				</el-form-item>
				<el-row :gutter="20">
					<el-col :span="4">
						<el-form-item label="是否启用" prop="delFlag">
							<el-switch v-model="addParentForm.delFlag"></el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="排序值" prop="sortOrder">
							<el-input v-model="addParentForm.sortOrder"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="描述">
					<el-input v-model="addParentForm.description"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addParentFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addParentSubmit" :loading="addParentLoading">提交</el-button>
			</div>
		</el-dialog>
		<el-dialog title="新增子节点" :visible.sync="addChildrenFormVisible" :close-on-click-modal="false">
			<el-form :model="addChildrenForm" label-width="100px" :rules="addChildrenFormRules" ref="addChildrenForm">
				<el-form-item label="父节点" ref="selectForm" prop="parentId">
					<el-select v-model="addChildrenForm.parentId" placeholder="请选择">
						<el-option
								v-for="item in parentMenus"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="菜单名称" prop="name">
					<el-input v-model="addChildrenForm.name"></el-input>
				</el-form-item>
				<el-form-item label="页面路径" prop="path">
					<el-input v-model="addChildrenForm.path"></el-input>
				</el-form-item>
				<el-form-item label="菜单标题" prop="title">
					<el-input v-model="addChildrenForm.title"></el-input>
				</el-form-item>
				<el-form-item label="图标" prop="icon">
					<el-input v-model="addChildrenForm.icon"></el-input>
				</el-form-item>
				<el-form-item label="前段组件" prop="component">
					<el-input v-model="addChildrenForm.component"></el-input>
				</el-form-item>
				<el-form-item label="跳转路径" prop="url">
					<el-input v-model="addChildrenForm.url"></el-input>
				</el-form-item>
				<el-row :gutter="20">
					<el-col :span="4">
						<el-form-item label="是否禁用" prop="delFlag">
							<el-switch v-model="addChildrenForm.delFlag"></el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="排序值" prop="sortOrder">
							<el-input v-model="addChildrenForm.sortOrder"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="描述" prop="description">
					<el-input v-model="addChildrenForm.description"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addChildrenFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addChildrenSubmit" :loading="addChildrenLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
    import {
        addPermission,
        deletePermission,
        editPermission,
        getAllPermission,
        getParentPermission,
        getPermissionById
    } from '../../api/api';

    export default {
        data() {
            let checkNumber = (rule, value, callback) => {
                let myReg = /^(0|[1-9][0-9]*)$/
                if (!myReg.test(value)) {
                    return callback(new Error('请输入正确的数字'));
                }else {
                    callback();
				}
            };
            return {
                permissions: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                editLoading: false,
                editFormRules: {
                    name: [
                        {required: true, message: '请输入菜单名称', trigger: 'blur'}
                    ],
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'}
                    ],
                    sortOrder: [
                        {required: true, message: '请输入排序值', trigger: 'blur'},
                        { validator: checkNumber, trigger: 'blur' }
                    ]
                },
                editForm: {
                    id: '',
                    name: '',
                    path: '',
                    title: '',
                    icon: '',
                    component: '',
                    url: '',
                    delFlag: 0,
                    sortOrder: 0,
                    description:''
                },
                //新增界面是否显示
                addParentFormVisible: false,
                addParentLoading: false,
                addParentFormRules: {
                    name: [
                        {required: true, message: '请输入菜单名称', trigger: 'blur'}
                    ],
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'}
                    ],
                    sortOrder: [
                        {required: true, message: '请输入排序值', trigger: 'blur'},
                        { validator: checkNumber, trigger: 'blur' }
                    ]
                },
                //新增界面数据
                addParentForm: {
                    name: '',
                    path: '',
                    title: '',
                    icon: '',
                    component: '',
                    url: '',
                    delFlag: false,
                    sortOrder: 0,
                    description:''
                },
                //新增界面是否显示
                addChildrenFormVisible: false,
                addChildrenLoading: false,
                addChildrenFormRules: {
                    name: [
                        {required: true, message: '请输入菜单名称', trigger: 'blur'}
                    ],
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'}
                    ],
                    sortOrder: [
                        {required: true, message: '请输入排序值', trigger: 'blur'},
                        { validator: checkNumber, trigger: 'blur' }
                    ],
                    parentId:[
                        { required: true, message: '请选择父节点', trigger: 'change' }
					]
                },
                //新增界面数据
                addChildrenForm: {
                    id: '',
                    parentId: '',
                    name: '',
                    path: '',
                    title: '',
                    icon: '',
                    component: '',
                    url: '',
                    delFlag: 0,
                    sortOrder: 0,
                    description:''
                },
                parentMenus: []
            }
        },
        methods: {
            showEditForm: function (data, node, col) {
                let param = {
                    permissionId: data.id
                }
                // 加载当前点击的权限信息回显到表单中;
				getPermissionById(param).then(data=>{
				    if (data.code == 200){
				        //将数据写回表单中
                        this.editForm = Object.assign({}, data.data);
					}
				})
            },
            //显示新增界面
            handleChildrenAdd: function () {
                this.addChildrenFormVisible = true;
                this.addChildrenForm = {
                    id: '',
                    parentId: '',
                    name: '',
                    path: '',
                    title: '',
                    icon: '',
                    component: '',
                    url: '',
                    delFlag: 0,
                    sortOrder: 0,
                    description:''
                };
                getParentPermission().then(data=>{
                    if (data.code == 200){
                        this.parentMenus = data.data;
                    }
                });
            },
            handleParentAdd: function () {
                this.addParentFormVisible = true;
                this.addParentForm = {
                        name: '',
                        path: '',
                        title: '',
                        icon: '',
                        component: '',
                        url: '',
                        delFlag: 0,
                        sortOrder: 0,
                    	description:''
                }
            },
            getAllPermission:function(){
                getAllPermission().then(data=>{
                    if (data.code == 200){
                        this.permissions = data.data;
                    }
				});
			},
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {

                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            let para = Object.assign({}, this.editForm);
                            editPermission(para).then((data) => {
                                this.editLoading = false;
                                if (data.code == 200){
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: '提交失败',
                                        type: 'error'
                                    });
                                }
                                this.$refs['editForm'].resetFields();
                                this.editFormVisible = false;
                                this.getAllPermission();
                                this.editLoading = false;
                            });
                        });
                    }
                });
            },
			// 添加父节点节点
			addParentSubmit:function(){
                this.$refs.addParentForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addParentLoading = true;
                            let para = Object.assign({}, this.addParentForm);
                            addPermission(para).then((data) => {
                                this.addParentLoading = false;
                                if (data.code == 200){
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: '提交失败',
                                        type: 'error'
                                    });
                                }
                                this.$refs['addParentForm'].resetFields();
                                this.addParentFormVisible = false;
                                this.getAllPermission();
                                this.addParentLoading = false;
                            });
                        });
                    }
                });
			},
			// 添加子节点
			addChildrenSubmit:function () {
                this.$refs.addChildrenForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addChildrenLoading = true;
                            let para = Object.assign({}, this.addChildrenForm);
                            addPermission(para).then((data) => {
                                if (data.code == 200){
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: '提交失败',
                                        type: 'error'
                                    });
                                }
                                this.$refs['addChildrenForm'].resetFields();
                                this.addChildrenFormVisible = false;
                                this.getAllPermission();
                                this.addChildrenLoading = false;
                            });
                        });
                    }
                });
            },
            // 删除
            batchRemove: function () {
                //获取当前选中的记录
                let  ids = this.$refs.tree.getCheckedKeys();
                if (ids.length<1) return;
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = { ids: ids.toString() };
                    deletePermission(para).then((data) => {
                        this.listLoading = false;
                        if (data.code == 200){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }
                        this.getAllPermission();
                        this.listLoading = false;
                    });
                }).catch(() => {

                });
            }

        },
        mounted() {
            this.getAllPermission();
        }
    }
</script>